<template>
  <div class="scroll">
    <example-card title="文件上传" url="http://element.eleme.io/#/zh-CN/component/upload">
      <div>
        Logo上传
        <el-upload
            :headers="{ token: token }"
            :action="uploadUrl"
            :show-file-list="false"
            :on-success="successUploadLogo"
            :on-remove="removeLogo"
            class="avatar-uploader"
            :before-upload="beforeAvatarUpload"
        >
          <div v-if="logoUrl" class="avatar" :style="background" ></div>
          <span class="avatar-uploader-icon" v-else>
          <i class="el-icon-plus"></i>
          <span>上传LOGO</span>
        </span>
        </el-upload>
      </div>
      <div>
        上传列表展示
        <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </div>
    </example-card>
  </div>
</template>

<script>
  export default {
    name: "ui_file_view",
    data() {
      return {
        uploadUrl: "https://jsonplaceholder.typicode.com/posts/",
        token: "auth_token",
        logoUrl: "",
        dialogImageUrl: "",
        dialogVisible: false
      };
    },
    computed: {
      background() {
        return {
          backgroundRepeat: "no-repeat",
          backgroundSize: "cover",
          backgroundPosition: "center",
          backgroundImage: `url(${this.logoUrl})`
        };
      }
    },
    methods: {
      beforeAvatarUpload(file) {
        const isJPG = file.type === "image/jpeg";
        const isGIF = file.type === "image/gif";
        const isPNG = file.type === "image/png";
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG && !isGIF && !isPNG) {
          this.$message.error("上传图片必须是JPG/JPEG/GIF/PNG格式!");
        }
        if (!isLt2M) {
          this.$message.error("上传图片大小不能超过 2MB!");
        }
        return (isJPG || isGIF || isPNG) && isLt2M;
      },
      successUploadLogo(res) {
        console.log("success upload response", res);
        this.logoUrl = "http://www.jf258.com/uploads/2015-05-15/085307193.jpg";
      },
      removeLogo() {
        this.logoUrl = "";
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    }
  };
</script>

<style scoped lang="less">
  .avatar-uploader {
    .avatar {
      width: 140px;
      height: 140px;
    }
    & /deep/ .el-upload {
      width: 140px;
      height: 140px;
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      position: relative;
      box-sizing: border-box;
      overflow: hidden;
      &:hover {
        border-color: #409eff;
      }
    }
  }
  .avatar-uploader-icon {
    position: relative;
    width: 100%;
    height: 100%;
    color: #8c939d;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    span {
      i {
        font-style: normal;
        color: rgb(247, 102, 102);
      }
    }
  }
</style>
